 <template>
  <div class="box">
      <header class="header">
        <van-nav-bar left-arrow @click-right="goSearch"
        @click-left="$router.back('')"
        >
          <template #right>
            搜索
          </template>
          <template #title>
            <van-search
              v-model="value"
              shape="round"
              placeholder="请输入搜索关键词"
            />
          </template>
        </van-nav-bar>
      </header>
      <div class="content search">
        <div class="hot-search s-box">
        <h4>热门搜索: </h4>
        <div class="list">
          <van-tag v-for="item in hot" :key="item" plain type="primary" @click="goSearch(item)" size="large">{{item}}</van-tag>
        </div>
        </div>
        <div class="history-search s-box">
          <h4>搜索历史: </h4>
          <div class="list">
            <van-tag v-for="(item, idx) in history" :key="item.searchId" plain type="primary" size="large" @click="goSearch(item.searchText)" closeable @close="close(item.searchId, idx)">{{item.searchText}}</van-tag>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Search, Tag, Toast } from 'vant'
import { getSearch, addSearch, delSearch } from '../../api/index.js'
Vue.use(NavBar)
Vue.use(Search)
Vue.use(Tag)
Vue.use(Toast)
export default {
  data () {
    return {
      value: '',
      show: true,
      hot: ['手机', '电脑', '化妆品', '零食', '李扬同款风衣', '林立新风流洗发膏'],
      history: []
    }
  },
  methods: {
    close (id, i) {
      delSearch({
        userId: localStorage.getItem('userId'),
        searchId: id
      }).then(res => {
        console.log('删除搜索关键字成功')
        this.history.splice(i, 1)
      })
    },
    goSearch (val) {
      let st = ''
      if (typeof val !== 'object') {
        st = val
      } else {
        st = this.value
      }
      if (st === '') {
        Toast('请输入关键字')
        return null
      }
      addSearch({
        userId: localStorage.getItem('userId'),
        searchText: st
      }).then(res => {
        // console.log('添加成功了,可以跳转了')
        getSearch({
          userId: localStorage.getItem('userId')
        }).then(res => {
          this.history = res.data.data
        })
      })
      this.$router.push('/searchRes/' + st)
    }
  },
  mounted () {
    getSearch({
      userId: localStorage.getItem('userId')
    }).then(res => {
      this.history = res.data.data
    })
  }
}
</script>

<style lang="scss">
  .search {
    .van-search{
       background:#fff;
     }
    .van-nav-bar{
      border-bottom: solid 1px #aaa;
      background: #FF0055;
      .van-icon{
        color: #fff;
      }
    }
     .van-nav-bar__title{
       width: 70%;
       max-width: 70%;
     }
     .van-search{
       padding: 0;
     }
     .content{
       padding: 0.1rem;
       background: #eee;
     }
     .s-box{
       padding: 0.1rem 0;
       h4{
         font-weight: normal;
         font-size: 18px;
       }
       .list{
         .van-tag{
           color:#ff3163;
           margin: 0.06rem;
         }
       }
     }
     .van-nav-bar__right{
       color: #fff;
     }
  }
</style>
